<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.web {
				width: 400px;
				margin: 0 auto;
				background: white;
				position: relative;
			}
			
			.youxikuang {
			    margin-top: -108px;
			    background: white;
			    width: 417px;
			    height: 730px;
			    position: relative;
			    overflow: hidden;
			    border: 4px solid black;
			}
			
			.hang {
				position: absolute;
				top: 0px;
				left: 0px;
			}
			
			.hang ul {
				display: flex;
				justify-content: space-around;
			}
			
			.aa {
				list-style: none;
				width: 100px;
				height: 100px;
				border: 2px solid black;
				background: white;
				border-radius: 10px;
			}
			
			.active {
				background: black;
			}
			
			.posui {
				background: white;
			}
			
			.dianji {
				padding: 36px 80px;
				background: red;
				border-radius: 40px;
				position: absolute;
				top: 450px;
				left: 125px;
				color: white;
				font-size: 30px;
				font-weight: bold;
			}
			.baise{
				    padding: 36px 60px;
				    background: black;
				    border-radius: 40px;
				    position: absolute;
				    top: 207px;
				    left: 132px;
				    color: white;
				    font-size: 20px;
			}
			.heise{
				    padding: 26px 40px;
				    background: silver;
				    border-radius: 40px;
				    position: absolute;
				    top: 59px;
				    left: 77px;
				    font-size: 20px;	
			}
		</style>
		<div class="web">
			<div class="youxikuang">
				<div class="hang">
					<ul class="topnav">
						<li class="aa"></li>
						<li class="aa active"></li>
						<li class="aa"></li>
						<li class="aa "></li>
					</ul>
				</div>
			</div>
			<buttom class="dianji">开始</buttom>
			<div class="baise">别踩</buttom>
			<div class="heise">白块</buttom>
		</div>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".youxikuang").on("click", "li", function() {
				console.log(this.className=="aa active");
					if (this.className=="aa active") {
							
					}else{
						alert("失败了,请重来！");
							window.location.reload();
					}
				$(this).addClass("posui")
				$(this).removeClass("active")
				$(this.parentNode).removeClass("topnav")
				
			
			})
			$(".dianji").on("click", function() {
//					清除开始按钮
					$(".dianji").css("display","none");
					$(".baise").css("display","none");
					$(".heise").css("display","none");
					var timer = null;
					var i = 0;
					timer = setInterval(function() {
					var aaa = $("ul")
					var p = aaa.length - 1
					console.log(aaa);
					var suijishu = parseInt(Math.random() * 4) //生成0-3随机数
					var sss = document.querySelectorAll("li") //获取所有的li
					var top = $(aaa[p]).offset().top;
					var arr = document.querySelectorAll("ul")
					var pp = arr.length - 1;
					console.log("arr[pp]", arr[pp]);
					i++
					$(aaa[0]).clone().prependTo(".hang"); //在头上克隆一行新的
					$(sss[suijishu]).addClass("active").siblings().removeClass("active") //随机在li添加active
					console.log($(aaa[p]).offset().top); //最后一个ul距离顶部的距离
					if (top > 600) {
						if (aaa[p].className == "topnav") {
							alert("失败了,请重来！");
							window.location.reload();
						} else {
							$(aaa).eq(-1).remove()
						}
					}
					
					//				清除计时器
					if (i > 100) {
						clearTimeout(timer)
					}
				}, 2000)

			})
		</script>
	</body>

</html>